import logo from "../assets/yuwan_logo.png";
import styled from "@emotion/styled";
import { Row, ButtonNoPadding } from "../components/lib";
import { resetRoute } from "../utils";
import { Avatar } from "./Avatar";
import { ProjectPopover } from "./ProjectPopover";
import { UserPopover } from "./UserPopover";

const Header = styled(Row)`
  height: 6rem;
  padding: 3.2rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
`;
const HeaderLeft = styled(Row)``;
const HeaderRight = styled(Row)``;

export const PageHeader = () => (
  <Header between={true}>
    <HeaderLeft gap={true}>
      <ButtonNoPadding type="link" onClick={resetRoute}>
        <img src={logo} alt="logo" width="32rem" />
      </ButtonNoPadding>
      <ProjectPopover />
      <UserPopover />
    </HeaderLeft>
    <HeaderRight>
      <Avatar />
    </HeaderRight>
  </Header>
);
